<template>
  <div class="container">
    <!-- 导航栏 -->
    <uni-nav-bar fixed="true" title="登录" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <!-- 内容区 -->
    <div class="content">
      <!-- 图标 -->
      <image class="icon" src="@/static/icons/mine/login.svg"></image>
      <div class="slogan">
        <p>婚礼专家</p>
        <p>专为婚礼人打造的新人问卷小工具</p>
      </div>
      <!-- 登录按钮 -->
      <!-- 未同意协议时的点击遮罩 -->
      <div v-if="!hasAcceptedUserAgreement" class="login-btn-mask" @click="loginBtnMaskClick"></div>
      <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberCallback"
        :disabled="!hasAcceptedUserAgreement">
        <!-- <image class="login-btn-icon" src="@/static/icons/mine/wechat-logo.png"></image> -->
        <p class="login-btn-text">手机号一键登录</p>
      </button>
      <div class="accept-agreement" :class="hasAcceptedUserAgreement ? 'accept' : ''"
        @click="acceptUserAgreementClickHandle">
        <div class="circle" :class="hasAcceptedUserAgreement ? 'accept' : ''"></div>
        <p class="accept-agreement-text">请你登录前阅读<span class="emphasis" @click="navigateTo('user-agreement')">《用户协议》</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUser } from '@/stores/user-store';
import { back, navigateTo } from '@/utils/navigate';
import { showToast } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const userStore = useUser()
const { loginByPhone } = userStore

//#region 用户协议相关
/** 是否同意了用户协议 */
const hasAcceptedUserAgreement = ref(false)

/** 同意用户协议点击事件 */
const acceptUserAgreementClickHandle = () => {
  hasAcceptedUserAgreement.value = !hasAcceptedUserAgreement.value
}

//#endregion

//#region 登录相关

/** 路由参数 */
const routeQuery = ref({})

// 加载后检查是否有路由参数
onLoad((options) => {
  routeQuery.value = options || {}
})

/** 点击按钮遮罩点击事件 */
const loginBtnMaskClick = () => {
  showToast('请先同意用户协议')
}

/** 获取手机号回调 */
const getPhoneNumberCallback = async (e: any) => {
  console.log(e)
  const code = e?.detail?.code
  console.log('code', code)

  if (code) {
    try {
      uni.showLoading({
        title: '登录中...',
        mask: true
      })

      await loginByPhone(code)
      navigateTo('upload-information', routeQuery.value)

      uni.hideLoading()
    } catch (e) {
      console.error('loginByPhone error', e)
      showToast('登录失败，请重试')
    }
  } else {
    showToast('请授权手机号')
  }
}

//#endregion


</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;

  display: grid;
  grid-template:
    'nav-bar' auto
    'content' 1fr
    / 1fr;

  // 内容区
  .content {
    grid-area: content;

    display: grid;
    grid-template:
      '.' 23.7179vw
      'icon' 19.4872vw
      '.' 24px
      'slogan' 11.5385vw
      '.' 60px
      'login-btn' 10.7692vw
      '.' 15px
      'accept-agreement' 4.6154vw
      '.' 1fr;

    justify-items: center;
    align-items: center;

    .icon {
      grid-area: icon;
      width: 19.4872vw;
      height: 19.4872vw;
    }

    .slogan {
      grid-area: slogan;
      font-size: 4.6154vw;
      color: #333333;
      text-align: center;
      line-height: 1.5;
    }

    // 未同意协议时的点击遮罩
    .login-btn-mask {
      grid-area: login-btn;
      z-index: 1;

      width: 342px;
      height: 42px;
      opacity: 0;
      border-radius: 4px;
    }

    .login-btn {
      grid-area: login-btn;

      width: 342px;
      height: 42px;
      background: #17ce92;
      border-radius: 4px;

      display: flex;
      justify-content: center;
      align-items: center;


      .login-btn-icon {
        width: 5.1282vw;
        height: 5.1282vw;
      }

      .login-btn-text {
        margin-left: 8px;

        color: #fff;
        font-size: 16px;
      }
    }

    .accept-agreement {
      grid-area: accept-agreement;

      display: flex;
      justify-content: center;
      align-items: center;

      .circle {
        width: 4.1026vw;
        height: 4.1026vw;
        border: 1px solid #b0eeda;
        border-radius: 50%;

        position: relative;

        &.accept::after {
          content: '';

          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 3.0769vw;
          height: 3.0769vw;
          background: #17ce92;
          border-radius: 50%;
        }
      }

      .accept-agreement-text {
        margin-left: 4px;

        line-height: 100%;
        font-size: 3.3333vw;
        color: #8d8d8d;

        .emphasis {
          color: #17CE92;
        }
      }
    }
  }
}
</style>
